<template>
  <div class="container">
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#3ACE8A">
        <van-swipe-item v-for="(image, index) in data.image" :key="index">
          <img src="../../assets/image8.png" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="content">
      <div class="name">{{ data.name }}</div>
      <div class="number">商品编号：{{ data.number }}</div>
      <div class="mouny">
        <div>价格：</div>
        <div class="text">
          ￥<van-field
            v-model="data.mouny"
            type="number"
            input-align="right"
            placeholder="金额"
          />
        </div>
      </div>
      <div class="stock">
        <span style="color: #333333; margin-right: -25%">上架数量</span
        >库存数量：{{ data.stock }}
        <van-stepper v-model="stock" min="1" integer />
      </div>
      <div class="entrust">
        <div style="color: #333333">委托代卖费</div>
        <div>{{ `￥ ${this.stock * this.data.mouny * 0.1}` }}</div>
        <!-- <div>{{ `￥ ${this.stock * this.data.mouny * 0.1} = 上架数量 ${this.stock} * 价格 ￥${this.data.mouny} * 手续费 （10%）` }}</div> -->
      </div>
      <div class="check">
        <van-checkbox v-model="checked" checked-color="#3ACE8A" shape="square"
          >我同意知玉斋平台<span style="color: #3ACE8A" @click.stop="agreement">《用户协议》</span></van-checkbox
        >
      </div>
    </div>

    <div class="comContent">
      <div class="comTitle">商品详情</div>
    </div>

    <div class="buttonList">
      <div @click="returnFn">返回列表</div>
      <div @click="addFn">上架商品</div>
    </div>

    <van-popup v-model="show">
        <img src="../../assets/image10.png" alt="" width="250" height="250">
        <div class="text">长按保存二维码支付委托代卖费</div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        image: [
          "https://img01.yzcdn.cn/vant/apple-1.jpg",
          "https://img01.yzcdn.cn/vant/apple-2.jpg",
        ],
        name: "SUGAR 商品名称显示全部 超出换行 上传 时间限制字数",
        number: "TK583702651984",
        mouny: 298,
        stock: 120,
        type: 0,
      },
      stock: 0,
      checked: false,
      show: false,
    };
  },
  methods: {
    getNum() {
      console.log(this.data.stock);
    },
    returnFn() {
      this.$router.go(-1);
    },
    addFn() {
        if(this.stock == 0 || !this.checked) return this.$toast.fail('请填写正确内容');
        this.show = true;
    },
    agreement() {
        this.$router.push('/agreement')
    },
  },
};
</script>

<style lang="less" scoped>
div {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  .swiper {
    width: 100%;
    height: 250px;

    .my-swipe {
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .content {
    width: 100%;
    padding: 0 3%;

    .name {
      margin-top: 20px;
      letter-spacing: 1px;
      font-weight: 700;
      font-size: 1.1em;
      color: #000;
    }
    .number {
      margin-top: 20px;
      color: #999999;
      font-size: 0.6em;
    }
    .mouny {
      margin-top: 30px;
      color: #999999;
      font-size: 0.6em;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .text {
        color: #3ace8a;
        display: flex;
        justify-content: center;
        align-items: center;

        /deep/ .van-field__control {
          width: 60px;
          color: #3ace8a;
          font-size: 1.7em;
        }
      }
    }
    .stock {
      margin-top: 20px;
      color: #999999;
      font-size: 0.6em;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .entrust {
      margin-top: 20px;
      color: #999999;
      font-size: 0.6em;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .check {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 20px;

      /deep/ .van-checkbox__label {
        color: #333333;
        font-size: 0.9em;
      }
    }
  }
  .comContent {
    width: 100%;
    padding: 0 3%;

    .comTitle {
      margin-top: 20px;
      color: #333333;
      font-size: 1em;
      letter-spacing: 0.5px;
    }
  }
  .buttonList {
    width: 100%;
    height: 50px;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    div {
      width: 50%;
      height: 100%;
      text-align: center;
      line-height: 50px;
      letter-spacing: 1px;
      font-size: 1em;
    }

    div:nth-child(1) {
      background-color: #fff;
      border-top: 1px solid #ece7e7;
      color: #3ace8a;
    }

    div:nth-child(2) {
      background-color: #3ace8a;
      color: #fff;
    }
  }
  /deep/ .van-popup--center {
      border-radius: 10px;
      padding: 20px 20px 40px 20px;

      .text {
          margin-top: 10px;
          color: #333333;
          font-size: 1.1em;
      }
  }
}
</style>